<template>
  <a-card title="汽车" :bordered="false">
    <a-form-model
      ref="form"
      :model="model"
      :rules="rules"
      :label-col="FORM_LAYOUT.labelCol"
      :wrapper-col="FORM_LAYOUT.wrapperCol">
      <a-row class="form-row" :gutter="16">
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="汽车名称" prop="carname">
            <a-input v-model="model.carname"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="类型" prop="type">
            <a-select v-model="model.type"></a-select>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="地区" prop="brandId">
            <a-input-number v-model="model.brandId"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="配置" prop="configId">
            <a-input-number v-model="model.configId"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="简介" prop="intro">
            <a-input v-model="model.intro"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="车辆识别码" prop="vin">
            <a-input v-model="model.vin"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="价格" prop="buyPrice">
            <a-input-number v-model="model.buyPrice"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="门店编号" prop="shopId">
            <a-input-number v-model="model.shopId"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="车辆状态(可租1，维修中2，租出3，删除4)" prop="state">
            <a-select v-model="model.state"></a-select>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="价钱" prop="price">
            <a-input-number v-model="model.price"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="添加时间" prop="addtime">
            <e-date-picker v-model="model.addtime"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="保险ID" prop="insuranceId">
            <a-input-number v-model="model.insuranceId"/>
          </a-form-model-item>
        </a-col>

        <a-col :sm="24">
          <div class="input-btn-group">
            <e-btn-save permissions="crs:car:save" :loading="saveLoading" :click-callback="save"/>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </a-card>
</template>

<script>
import { FORM_LAYOUT } from '@/utils/const/form'
import { get, save } from '@/api/crs/car'
import { saveSuccessTip } from '@/utils/tips'
import { isNotBlank } from '@/utils/util'
import EBtnSave from '@/components/Easy/general/BtnSave'
import { DATE_PATTERN } from '@/utils/const/datePattern'
import EDatePicker from '@/components/Easy/data-entry/DatePicker'

export default {
  name: 'CrsCarInput',
  components: {
    EBtnSave,
    EDatePicker
  },
  data () {
    return {
      id: this.$route.query.id,

      FORM_LAYOUT: FORM_LAYOUT,
      DATE_PATTERN: DATE_PATTERN,

      // 表单
      saveLoading: false,
      model: { },
      rules: {
        carname: [
          { required: true, message: '请输入汽车名称', trigger: 'blur' },
          { max: 16, message: '汽车名称不能超过16个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'blur' }
        ],
        brandId: [
        ],
        configId: [
        ],
        intro: [
          { max: 16, message: '简介不能超过16个字符', trigger: 'blur' }
        ],
        vin: [
          { max: 16, message: '车辆识别码不能超过16个字符', trigger: 'blur' }
        ],
        buyPrice: [
        ],
        shopId: [
        ],
        price: [
        ],
        insuranceId: [
        ]
      }
    }
  },
  created () {
    if (isNotBlank(this.id)) {
      this.edit(this.id)
    }
  },
  methods: {
    edit (id) {
      get(id).then((res) => {
        this.model = res.data
      })
    },
    save () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.saveLoading = true
          save(this.model).then((res) => {
            this.saveLoading = false
            saveSuccessTip()
            this.model = res.data
          }).catch(({ response }) => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
